<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-view and ng-template</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-route.js" charset="utf-8"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h2>AngularJS Sample Application</h2>

    <div ng-app="mainApp">
        <p><a href="#addstudent">Add Student</a></p>
        <p><a href="#viewstudents">View Student</a></p>
        <div ng-view>
        </div>

        <script type="text/ng-template" id="addstudent.html">
            <h2>Add Student</h2>
            {{ message }}
        </script>

        <script type="text/ng-template" id="viewstudents.html">
            <h2>View Students </h2>
            {{ message }}
        </script>
    </div>

    <script>
        var mainApp = angular.module("mainApp", ['ngRoute']);
        mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
                when('/addstudent', {
                    templateUrl: 'addstudent.html',
                    controller: 'AddStudentController'
                }).when('/viewstudents', {
                    templateUrl: 'viewstudents.html',
                    controller: 'ViewStudentsController'
                }).otherwise({
                    redirectTo: '/addstudent'
                });
        }]);

        mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
        });

        mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "This page will be used to display all the students";
        });
    </script>
</body>
</html>
